<div class="main-content">
  <app-loader *ngIf="!item && !errorMessage"></app-loader>
  <app-error-message [message]="errorMessage" *ngIf="!item && errorMessage !== ''"></app-error-message>

  <div *ngIf="item" class="item">
    <div class="mobile item-header">
      <p class="title-block">
        <span class="back-button" (click)="goBack()"></span>
        <a *ngIf="hasUrl" class="title" href="{{item.url}}" [attr.target]="settings.openLinkInNewTab ? '_blank' : null" [attr.rel]="settings.openLinkInNewTab ? 'noopener' : null">
          {{item.title}}
        </a>
        <a *ngIf="!hasUrl" class="title" [routerLink]="['/item', item.id]"
          routerLinkActive="active">
          {{item.title}}
        </a>
      </p>
    </div>
    <div class="laptop" [class.item-header]="item.comments_count > 0 || item.type === 'job'" [class.head-margin]="item.text">
      <p *ngIf="hasUrl">
        <a class="title" href="{{item.url}}" [attr.target]="settings.openLinkInNewTab ? '_blank' : null" [attr.rel]="settings.openLinkInNewTab ? 'noopener' : null">
        {{item.title}}
        </a>
        <span *ngIf="item.domain" class="domain">({{item.domain}})</span>
      </p>
      <p *ngIf="!hasUrl">
        <a class="title" [routerLink]="['/item', item.id]" routerLinkActive="active">
        {{item.title}}
        </a>
      </p>
      <div class="subtext">
        <span *ngIf="item.type !== 'job'">
        {{item.points}} points by
          <a [routerLink]="['/user', item.user]" routerLinkActive="active">{{item.user}}</a>
        </span>
        <span [class.item-details]="item.type !== 'job'">
          {{item.time_ago}}
          <span *ngIf="item.type !== 'job'"> |
            <a [routerLink]="['/item', item.id]" routerLinkActive="active">
             {{item.comments_count | comment }}
            </a>
          </span>
        </span>
      </div>
    </div>
    <div *ngIf="item.type === 'poll'" class="pollResults">
      <div *ngFor="let pollResult of item.poll" class="pollContent">
        <div [innerHTML]="pollResult.content"></div>
        <div class="subtext">{{pollResult.points}} points</div>
        <div class="pollBar" [ngStyle]="{'width': pollResult.points/item.poll_votes_count*100+'%'}"></div>
      </div>
    </div>
    <p class="subject" [innerHTML]="item.content"></p>
    <ul class="comment-list">
      <li *ngFor="let comment of item.comments" >
        <app-comment [comment]="comment"></app-comment>
      </li>
    </ul>
  </div>
</div>
